新增一個互動性的元件

今天多做一個component，然後用p5.js來製作這個互動性元素的內容，現在可以在上面畫畫了，長下面這樣。

但不知道為什麼，我在地端可以完整地看到我修改的東西，但是佈署到vercel的網站後就沒辦法。

我今天也懶著去研究，所以就先這樣。

改一下抓梗圖的畫面

把原本過多的資訊給刪除，下方三個按鈕只剩下圖示、顏色，在使用上可以更直覺。

今日技術總結(叫GitHub Copilot幫我總結的)

我說：總結今天所有技術和更改，簡潔既可

GitHub Copilot：

今日技術總結與更改

1. 設置 WebSocket 伺服器
   使用 Node.js 和 socket.io 設置 WebSocket 伺服器，處理用戶連接、畫圖數據廣播和畫布清除。
2. 設置前端應用
   使用 React 和 p5.js 創建互動畫布組件。
   使用 socket.io-client 連接到 WebSocket 伺服器，處理畫圖和清除畫布事件。
3. 調整 package.json
   移除 react-scripts，使用 Vite 進行構建和預覽。
   更新後的 package.json：

{
  "name": "my-funny-website",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.6.0",
    "axios": "^1.7.4",
    "express": "^4.21.0",
    "p5": "^1.10.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.1",
    "socket.io": "^4.7.5",
    "socket.io-client": "^4.7.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "postcss": "^8.4.41",
    "tailwindcss": "^3.4.10",
    "vite": "^5.4.1"
  }
}

4. 更新 vercel.json

• 確保包含 builds 配置和 rewrites 配置。
• 更新後的 vercel.json：

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

5. 部署到 Vercel

• 推送最新代碼到 GitHub，讓 Vercel 自動觸發部署。
  總結
• 設置並運行 WebSocket 伺服器和前端應用。
• 調整 package.json 和 vercel.json 文件以適應 Vite 和 Vercel 部署。
• 確保最新代碼推送到 GitHub 並成功部署到 Vercel。

今天有點廢

其實每天都有點廢啦，但至少有打掃家裡，我把桌子旁邊的雜物都清掉了，現在我的工作桌看起來很乾淨。
過一天是一天，總是有進步的，如果有大神看到這篇文章再歡迎跟我說我遇到什麼問題。
啊剩下的我可能之後再修，明天先搞其他的，晚安，88。